import { useDispatch, useSelector } from 'react-redux';
import { clearDone } from '../store/actions/todos';

export const TodoFooter = () => {
  // hooks
  const dispatch = useDispatch();

  const leftCount = useSelector(
    (state) => state.todos.filter((item) => !item.done).length
  );
  // const list = useSelector((state) => state.todos);

  // let leftCount = 0;
  // list.forEach((item) => {
  //   if (!item.done) {
  //     leftCount += 1;
  //   }
  // });
  const handleClear = () => {
    console.log('action');
    dispatch(clearDone());
  };

  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> item left
      </span>
      <ul className="filters">
        <li>
          <a className="selected" href="#/">
            All
          </a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button className="clear-completed" onClick={handleClear}>
        Clear completed
      </button>
    </footer>
  );
};
